<template>
    <el-container class="layout">
        <el-aside class="aside" :width="collapse?'64px':'200px'" v-if="device==='desktop'">
            <!--左侧导航栏-->
            <Aside :background-color="backgroundColor" :is-collapse="collapse" :logoSrc="logoSrc" @select="select"
                   :title="projectInfo.name"/>
        </el-aside>

        <el-drawer :visible.sync="collapse" direction="ltr" :with-header="false" size="200px" v-else>
            <Aside :background-color="backgroundColor" :is-collapse="!collapse" :logoSrc="logoSrc" @select="select"
                   :title="projectInfo.name"/>
        </el-drawer>

        <el-container class="main" :class="{hasTagsView:needTagsView}">
            <!--右侧主体部分-->
            <el-header class="header" height="50">
                <!--头部导航栏-->
                <Header/>
                <tags-view v-if="needTagsView"/>
            </el-header>
            <!--  <el-main class="content">-->
            <!--内容展示区-->
            <app-main/>
            <!-- </el-main>-->
            <el-footer class="footer" height="40">
                <!--底部-->
                <Footer :copyrightCompany="projectInfo.copyrightCompany" :copyrightYear="projectInfo.copyrightYear"/>
            </el-footer>
        </el-container>
    </el-container>
</template>

<script lang="ts">
    import {Component, Provide, Vue} from "vue-property-decorator";
    import Aside from "@/components/Aside.vue";
    import Header from "@/components/Header.vue";
    import {Action, Getter} from "vuex-class";
    import Footer from "@/components/Footer.vue";
    import TagsView from "@/components/TagsView/index.vue";
    import AppMain from "@/components/AppMain.vue";

    const {body} = document;
    const WIDTH = 768; // refer to Bootstrap's responsive design
    const MENU_SHOW_MIN_WIDTH = 1024;
    @Component({
        components: {Footer, Header, Aside, TagsView, AppMain}
    })
    export default class Layout extends Vue {
        @Provide() private backgroundColor: string = "#222d32";
        @Getter("collapse") private isCollapse: any;
        @Getter("projectInfo") private projectInfo: any;
        @Getter("logoSrc") private logoSrc!: string;
        @Getter("device") private device!: string;
        @Action("setCollapse") private setCollapse!: (collapse: boolean) => void;
        @Action("toggleDevice") private toggleDevice!: (device: string) => void;

        get needTagsView(): boolean {
            return true;
        }

        private get collapse(): boolean {
            return this.isCollapse;
        }

        private set collapse(val: boolean) {
            this.setCollapse(val);
        }

        beforeMount() {
            window.addEventListener('resize', this.resizeHandler)
        }

        beforeDestroy() {
            window.removeEventListener('resize', this.resizeHandler)
        }

        mounted() {
            this.resizeHandler();
        }

        isMobile() {
            const rect = body.getBoundingClientRect();
            return rect.width - 1 < WIDTH
        }

        isHiddenMenu() {
            const rect = body.getBoundingClientRect();
            return rect.width - 1 < MENU_SHOW_MIN_WIDTH
        }

        resizeHandler() {
            if (!document.hidden) {
                const isMobile = this.isMobile();
                const isHidden = this.isHiddenMenu();

                this.setCollapse(!isMobile && isHidden);
                this.toggleDevice(isMobile ? 'mobile' : 'desktop');
            }
        }

        select(index: string, indexPath: string) {
            if (this.device === 'mobile') {
                this.setCollapse(!this.collapse);
            }
        }
    }
</script>

<style scoped lang="scss">
    @import "@/assets/css/variables.scss";

    .layout {
        width: 100%;
        height: 100%;

        .aside {
            height: 100%;
            max-width: #{$sideBarMaxWidth};
            transition: width 0.28s;
        }

        .main {
            width: 100%;
            transition: width 0.28s;

            .header {
                padding: 0;
            }

            .content {
                /*overflow-y: hidden;*/
                padding: 0;
            }

            .footer {
                padding: 0;
            }
        }
    }
</style>
